<div class="AknColumnConfigurator">
    <div class="AknColumnConfigurator-column attribute-groups">
        <header class="AknColumnConfigurator-columnHeader"><%- __('pim_enrich.entity.attribute_group.plural_label') %></header>
        <div data-scroll-container="attribute-groups" class="AknColumnConfigurator-listContainer">
            <ul class="AknVerticalList">
                <li class="AknVerticalList-item AknVerticalList-item--selectable <%- null === currentGroup ? 'selected active' : '' %>" data-attribute-group-code=""><%- __('pim_enrich.export.product.filter.attributes_selector.all_group') %></li>
                <% _.each(attributeGroups, function (attributeGroup) { %>
                    <li class="AknVerticalList-item AknVerticalList-item--selectable <%- currentGroup === attributeGroup.code ? 'selected active' : '' %>" data-attribute-group-code="<%- attributeGroup.code %>">
                        <%- i18n.getLabel(attributeGroup.labels, userContext.get('catalogLocale'), attributeGroup.code) %>
                    </li>
                <% }); %>
            </ul>
        </div>
    </div>
    <div class="AknColumnConfigurator-column attributes">
        <header class="AknColumnConfigurator-columnHeader">
            <input class="AknTextField AknColumnConfigurator-searchInput search-field" type="text" placeholder="<%- __('pim_enrich.export.product.filter.attributes_selector.attributes', {itemsCount: attributeCount}, attributeCount) %>"/>
        </header>
        <div data-scroll-container="attributes" class="AknColumnConfigurator-listContainer">
            <ul class="AknVerticalList"></ul>
        </div>
    </div>
    <div class="AknColumnConfigurator-column selected-attributes">
        <header class="AknColumnConfigurator-columnHeader">
            <span><%- __('pim_enrich.export.product.filter.attributes_selector.selected') %></span>
            <span class="AknButton AknButton--grey clear"><%- __('pim_enrich.export.product.filter.attributes_selector.clear') %></span>
        </header>
        <div data-scroll-container="selected-attributes" class="AknColumnConfigurator-listContainer">
            <span class="AknMessageBox AknMessageBox--centered empty-message <%- 0 === selectedAttributes.length ? '' : 'AknMessageBox--hide' %>"><%- __('pim_enrich.export.product.filter.attributes_selector.empty_selection') %></span>
            <ul class="AknVerticalList"><!--
                --><% _.each(selectedAttributes, function (attribute) { %>
                    <li class="AknVerticalList-item AknVerticalList-item--movable <%- currentGroup === attribute.code ? 'selected' : '' %>" data-attribute-code="<%- attribute.code %>">
                        <div>
                            <span class="attribute-label"><%- i18n.getLabel(attribute.labels, userContext.get('catalogLocale'), attribute.code) %></span>
                        </div>
                        <span class="AknIconButton AknIconButton--grey AknIconButton--small remove"><i class="icon-trash"></i></span>
                    </li>
                <% }); %><!--
            --></ul>
        </div>
    </div>
</div>
